<template>
  <div class="wrap">
    <ul class="flex">
      <ScrollNum
        v-for="(num, idx) of numArr"
        :key="idx"
        as="li"
        :i="num"
        :state="aniState"
        :index="idx"
      />
    </ul>

    <div class="btnBox">
      <img
        src="../../assets/fx/ss.png"
        style="width: 248px"
        @click="test"
        class="btn"
        alt=""
      />
      <img
        src="../../assets/fx/next.png"
        style="width: 248px"
        alt=""
        class="btn"
        @click="test5"
      />
    </div>
    <img
      src="../../assets/fx/show.png"
      @click="show = true"
      class="showm"
      alt=""
    />
    <div class="detail" v-show="show">
      <img
        src="../../assets/fx/back.png"
        class="back"
        @click="show = false"
        alt=""
      />
      <h3>一等奖</h3>

      <ul class="list">
        <li>
          <div class="d-list">
            <div
              class="d-item"
              v-for="(item, idx) in luckCouponList_1"
              :key="idx"
            >
              <p>{{ item.state == 1 ? item.randomNumber : '??????' }}</p>
              <span v-if="item.state == 1">{{ item.sp }}</span>
            </div>
          </div>
        </li>
        <!-- <li>
          <h3>二等奖</h3>
          <div class="d-list">
            <div
              class="d-item"
              v-for="(item, idx) in luckCouponList_2"
              :key="idx"
            >
              <p>{{ item.state == 1 ? item.randomNumber : '??????' }}</p>
              <span v-if="item.state == 1">{{ item.sp }}</span>
            </div>
          </div>
        </li> -->
        <!-- <li>
          <h3>三等奖</h3>
          <div class="d-list">
            <div
              class="d-item"
              :style="idx >= 4 && 'margin-top:20px'"
              v-for="(item, idx) in luckCouponList_3"
              :key="idx"
            >
              <p>{{ item.state == 1 ? item.randomNumber : '??????' }}</p>
              <span v-if="item.state == 1">{{ item.sp }}</span>
            </div>
          </div>
        </li> -->
      </ul>
    </div>

    <img src="../../assets/fx/4.png" class="lh1" alt="" />
    <img src="../../assets/fx/4.png" class="lh2" alt="" />
    <img src="../../assets/fx/4.png" class="lh3" alt="" />
    <img src="../../assets/fx/4.png" class="lh4" alt="" />
    <img src="../../assets/fx/4.png" class="lh5" alt="" />
    <img src="../../assets/fx/4.png" class="lh6" alt="" />
  </div>
</template>

<script>
import { Notify } from 'vant';

import ScrollNum from '../../components/Numtest/index.vue'
import { jackpotExecute, getMemberGiftRecordByActivity, resetServiceCardStatusByIds, resetServiceCardStatusByActivityId } from '../../api/luckInterface'
export default {
  name: 'App',
  components: { ScrollNum },
  data () {
    return {
      num: '000000',
      aniState: false,
      tindex: 0,
      list: [],
      oType: 0,
      activityId: null,
      show: false,
      luckCouponList_1: [],
      // luckCouponList_2: [],
      // luckCouponList_3: []
    }
  },
  computed: {
    numArr () {
      const str = String(this.num)
      let arr = []
      for (let i = 0; i < str.length; i++) {
        arr.push(parseInt(str[i]))
      }
      return arr
    }
  },
  mounted () {
    document.title = '抽奖'
    this.activityId = this.$route.query.activityId
    this.test2()

  },
  methods: {
    start () {
      this.aniState = !this.aniState
      this.tindex++
      this.num = this.list[this.oType].randomNumber
    },
    test () {
      if (this.aniState) {
        this.test3()
      }

    },

    test2 () {
      getMemberGiftRecordByActivity({ activityId: this.activityId }).then(res => {
        res.data.result.map(item => {
          item.sp = item.phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
          item.state = 0
          if (item.giftName == 1) {
            this.luckCouponList_1.push(item)
            console.log(item)
          }
        })
        let resdule = res.data.result.sort(this.compare('giftName'))
        resdule.map(item => {
          if (item.giftName == 1) {
            this.list.push(item)
          }
        })
        this.start()

      })

    },
    test3 () {
      this.aniState = false
      resetServiceCardStatusByIds({ ids: this.list[this.oType].memberServiceCardId }).then(res => {
        this.list[this.oType].state = 1
        this.luckCouponList_1 = []
        // this.luckCouponList_2 = []
        // this.luckCouponList_3 = []
        this.list.map(item => {

          if (item.giftName == 1) {
            this.luckCouponList_1.push(item)
          }
          // if (item.giftName == 2) {
          //   this.luckCouponList_2.push(item)
          // }
          // if (item.giftName == 3) {
          //   this.luckCouponList_3.push(item)
          // }
        })
        // console.log(this.luckCouponList_3)

      })

    },
    test4 () {
      resetServiceCardStatusByActivityId({ activityId: this.activityId }).then(res => {
        // Notify({ type: 'primary', message: res.data.message });
      })

    },
    test5 () {
      // if (this.oType >= this.list.length - 1) {
      //   this.test4()
      //   return false
      // }
      if (this.oType >= 4) {
        console.log("技术")
        return false
      }
      if (!this.aniState) {
        this.oType++
        this.tindex = 0
        this.aniState = false
        this.start()
      }

    },
    compare (property) {//property:根据什么属性排序
      return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        /*
        * value2 - value1; ——> 降序
        * value1 - value2; ——> 升序
        */
        return value2 - value1;//升序排序
      }
    },
  }
}
</script>
<style>
body {
  width: 1920px;
  height: 1080px;
  background: url('../../assets/fx/tbg-1.png') no-repeat;
  background-size: cover;
  max-width: 1920px;
}
.view-router {
  background: transparent;
}
</style>
<style scoped lang="scss">
@keyframes mymove1 {
  0% {
    top: 776px;
  }
  50% {
    top: 746px;
  }
  100% {
    top: 776px;
  }
}
@keyframes mymove2 {
  0% {
    top: 914px;
  }
  50% {
    top: 944px;
  }
  100% {
    top: 914px;
  }
}
@keyframes mymove3 {
  0% {
    top: 853px;
  }
  50% {
    top: 893px;
  }
  100% {
    top: 853px;
  }
}
@keyframes mymove4 {
  0% {
    top: 848px;
  }
  50% {
    top: 878px;
  }
  100% {
    top: 848px;
  }
}
.list {
  margin-top: 27px;
  display: flex;
  justify-content: center;
  li {
    width: 1700px;
    margin-bottom: 30px;
    margin-top: 30px;

    .d-list {
      display: flex;
      flex-wrap: wrap;
      .d-item {
        width: 242px;
        height: 80px;
        border-radius: 12px;
        color: #fff;
        text-align: left;
        letter-spacing: 3px;
        text-align: center;
        margin-right: 100px;
        margin-bottom: 60px;
        p {
          margin: 0;
          padding: 0;
          font-size: 60px;
          line-height: 40px;
          margin-bottom: 10px;
        }
        span {
          display: block;
          font-size: 39px;
          color: #fff;
          font-weight: normal;
          letter-spacing: 0px;
          line-height: 40px;
        }
      }
      .d-item:nth-of-type(5n) {
        margin-right: 0;
      }
    }
  }
  li:nth-of-type(3n) {
    border: none;
  }
}
.back {
  width: 180px;
  height: 70px;
  display: block;
  margin: 72px 0 0 70px;
  cursor: pointer;
  position: relative;
  z-index: 10;
}
.lh1 {
  width: 104px;
  height: 70px;
  position: absolute;
  left: 95px;
  top: 613px;
}
.lh2 {
  width: 104px;
  height: 70px;
  position: absolute;
  left: 103px;
  top: 776px;
  animation: mymove1 4s ease infinite;
}
.lh3 {
  width: 160px;
  height: 106px;
  position: absolute;
  left: 392px;
  top: 914px;
  animation: mymove2 4s ease infinite;
}
.lh4 {
  width: 104px;
  height: 70px;
  position: absolute;
  left: 1310px;
  top: 853px;
  animation: mymove3 4s ease infinite;
}
.lh5 {
  width: 207px;
  height: 137px;
  position: absolute;
  right: 140px;
  top: 848px;
  animation: mymove4 4s ease infinite;
}
.lh6 {
  width: 104px;
  height: 70px;
  position: absolute;
  right: 148px;
  top: 730px;
}
.detail {
  width: 1840px;
  height: 421px;
  background: url(../../assets/fx/22.png) no-repeat;
  background-size: cover;
  position: absolute;
  top: 494px;
  left: 40px;
  z-index: 9;
  h3 {
    color: #fff;
    font-size: 40px;
    font-weight: normal;
    position: absolute;
    width: 180px;
    height: 70px;
    left: 280px;
    top: 30px;
    line-height: 70px;
    z-index: 10;

    // min-width: 108px;
  }
}
.showm {
  width: 283px;
  height: 70px;
  position: absolute;
  top: 92px;
  right: 100px;
  cursor: pointer;
}
.btnBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 746px;
  margin: 0 auto;
}
.btn {
  width: 357px;
  height: 110px;
  display: block;
  margin: 70px 0 0;
  cursor: pointer;
}
.flex {
  display: flex;
  margin: 496px auto 0;
  justify-content: space-around;
  background: url(../../assets/fx/t1.png) no-repeat;
  background-size: cover;
  width: 938px;
  height: 163px;
  align-items: center;
}
.flex > li {
  /*width: 100%;
 font-size: 60px;*/
  font-weight: bold;
}
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
</style>

